<template>
	<view class="income-info">
		<view class="c-row-box">
			<view class="c-row-head">
				<view class="c-row-title">合同信息</view>
			</view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">订单备注</view>
						<view class="col-text">
							<textarea v-model="orderParams.remark" :disabled="isPreview" placeholder="注意,备注金额不参与计算!!!"
								placeholder-style="font-size: 24upx" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>合同图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.contract_img" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('image')"></image>
								<uni-icons @click="deleteImageArray(index)" type="minus-filled" size="10" color="red"
									style="position: absolute;right:0;top: -16upx;" v-if="!isPreview"></uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('image')" v-if="!isPreview">
								<image src="@/static/add.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>收据图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.receipt_img" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('receipt_img')"></image>
								<uni-icons @click="deleteImageArray(index)" type="minus-filled" size="10" color="red"
									style="position: absolute;right:0;top: -16upx;" v-if="!isPreview"></uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('receipt_img')" v-if="!isPreview">
								<image src="@/static/add.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>小票图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.note_img" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('note_img')"></image>
								<uni-icons @click="deleteImageArray(index)" type="minus-filled" size="10" color="red"
									style="position: absolute;right:0;top: -16upx;" v-if="!isPreview"></uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('note_img')" v-if="!isPreview">
								<image src="@/static/add.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		props: {
			isPreview: {
				type: Boolean,
				default () {
					return false
				}
			},
			orderParams: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			//选择图片
			chooseImage(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有				     
					success: function(res) {
						that.upImg(res.tempFiles, type)
					}
				});
			},

			//上传图片
			upImg(data, type) {
				let that = this;
				uni.showLoading({title:'上传中',mask:true});
				var i = data.i ? data.i : 0; //当前上传的哪张图片
				var success = data.success ? data.success : 0; //上传成功的个数
				var fail = data.fail ? data.fail : 0; //上传失败的个数
				uni.uploadFile({
					url: request.http + "/h5/order.upload/doupload",
					filePath: data[i].path,
					header: {},
					name: 'file',
					formData: {
						token: uni.getStorageSync("token") ? uni.getStorageSync("token") : ''
					},
					success: (res) => {
						if (JSON.parse(res.data).msg == "上传成功") {
							success++; //图片上传成功，图片上传成功的变量+1
							uni.hideLoading()
						}
						if(type == 'image'){
							that.orderParams.contract_img.push(JSON.parse(res.data).data.url)
						}
						if(type == 'receipt_img'){
							that.orderParams.receipt_img.push(JSON.parse(res.data).data.url)
						}
						if(type == 'note_img'){
							that.orderParams.note_img.push(JSON.parse(res.data).data.url)
						}
					},
					fail: () => {
						fail++; //图片上传失败，图片上传失败的变量+1
					},
					complete: () => {
						i++; //这个图片执行完上传后，开始上传下一张
						if (i == data.length) { //当图片传完时，停止调用          
							uni.showToast({
								icon: 'none',
								title: '成功：' + success + " 失败：" + fail,
							})
						} else { //若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							that.upImg(data);
						}
					}
				})
			},

			//删除图片
			deleteImageArray(index, type) {
				if(type == 'image'){
					this.orderParams.contract_img.splice(index, 1)
				}
				if(type == 'receipt_img'){
					this.orderParams.receipt_img.splice(index, 1)
				}
				if(type == 'note_img'){
					this.orderParams.note_img.splice(index, 1)
				}
			},
			
			// 预览图片
			preViewImage(type){
				if(type == 'image'){
					uni.previewImage({
						current: 0,
						urls: this.orderParams.contract_img
					})
				}
				if(type == 'receipt_img'){
					uni.previewImage({
						current: 0,
						urls: this.orderParams.receipt_img
					})
				}
				if(type == 'note_img'){
					uni.previewImage({
						urls: this.orderParams.note_img
					})
				}
			}

		}
	}
</script>

<style lang="less">
	@import url('../../components/common.less');
	@import url('./common.less');

	.addPic {
		position: relative;
		overflow: hidden;
		width: 68upx;
		height: 68upx;
		border: 1px solid #CCCCCC;
		margin-left: 20upx;

		image {
			width: 68upx;
			height: 68upx;
			margin-right: 37upx;
		}
	}
</style>
